<template>
  <view class="container tn-safe-area-inset-bottom">
    <view class="top-backgroup">
      <image src='/static/mine/bg.png' mode='widthFix' class='backgroud-image'></image>
    </view>
    
    <view class="tn-margin-left tn-margin-right" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 图标logo/头像 -->
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" style="margin-top: -450rpx;">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <view class="user-profile tn-shadow">
              <view class="user-profile__image">
								<tn-avatar v-if="userinfo.avatar" :src="userinfo.avatar" size="108rpx"></tn-avatar>
								<tn-avatar v-else src="/static/logo.png" size="110rpx"></tn-avatar>
              </view>
            </view>
            <view class="tn-padding-right">
              <view class="tn-padding-right tn-padding-left-sm">
								<text class="tn-color-wallpaper tn-text-xl tn-text-bold" v-if="userinfo.nickname">{{ userinfo.nickname }}</text>
                <button class="tn-color-wallpaper tn-text-xl tn-text-bold tn-login" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                  授权登录
                </button>
              </view>
              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
                <text class="tn-color-gray">欢迎您的光临！</text>
                <text class="tn-color-gray tn-padding-left-sm tn-text-sm">每天好心情。</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 方式20 start-->
      <view class="tn-flex">
        <view class="tn-flex-1 wallpaper-shadow tn-bg-white" style="margin: 50rpx 15rpx 0 0;padding: 30rpx 0;" @click="goto('/pages/mine/collection')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orangeyellow tn-color-white">
              <view class="tn-icon-camera-fill"></view>
            </view>  
            <view class="tn-text-center" style="font-size: 30rpx;">
              <view class="tn-text-ellipsis">我的收藏</view>
            </view>
          </view>
        </view>
        <view class="tn-flex-1 wallpaper-shadow tn-bg-white" style="margin: 50rpx 0 0 15rpx;padding: 30rpx 0;" @click="goto('/pages/mine/approval')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
              <view class="tn-icon-honor-fill"></view>
            </view> 
            <view class="tn-text-center" style="font-size: 30rpx;">
              <view class="tn-text-ellipsis">我的点赞</view>
            </view>
          </view>
        </view>
      </view>

      
      <view class="wallpaper-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-wechat"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">合作勾搭</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="callPhoneNumber">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-tel"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
            <view class="tn-margin-left-sm tn-color-wallpaper tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-gray--light tn-round">
              182****8926
            </view>
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="share">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-share"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">分享小程序</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-edit"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">问题反馈</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" v-if="userinfo">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="removeUserInfo">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-power"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">退出登录</view>
            </view>
          </button>
        </tn-list-cell>
      </view>
    </view>

    <view class='tn-tabbar-height'></view>
    <view class="bg-tabbar-shadow"></view>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js';
  import mine from '@/common/mixin/mine.js';
	import request from '@/common/request.js';
	import {getStorageData, removeStorageData} from '@/common/utils.js';
  export default {
    name: 'Mine',
    mixins: [base, mine],
    data(){
      return {
        invite_id: 0,
        userinfo: '',
      }
    },
    methods: {
      getPhoneNumber(e) {
      	if (e.detail.errMsg && e.detail.errMsg == "getPhoneNumber:ok") {
      		this.login(e.detail.code)
      	} else {
      		this.$tip.toast(e.detail.errMsg)
      	}
      },
      login(phoneCode) {
      	let _this = this
      	uni.login({
      		provider: 'weixin', //使用微信登录
      		success: async (res) => {
      			this.getLogin(res.code, phoneCode, this.invite_id);
      		}
      	});
      },
			
			// 删除用户信息
			removeUserInfo() {
				removeStorageData('token');
				removeStorageData('userinfo');
        
        uni.navigateTo({
          url: '/pages/index'
        })
			},
			
      /**
			 * 拨打固定电话
			 */
      callPhoneNumber() {
        uni.makePhoneCall({
          phoneNumber: "18201018926",
        });
      },
			
      /**
			 * 分享小程序
			 */ 
      onShareAppMessage(res) {
        return {
          title: '协呈服务', // 小程序的名称
          path: '/pages/index', // 默认是当前页面，必须是以‘/’开头的完整路径
        };
      },
    },
    created() {
      this.userinfo = getStorageData('userinfo');
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';
  
  .bg-tabbar-shadow{
    // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
    box-shadow: 0rpx 0rpx 400rpx 0rpx rgba(0, 0, 0, 0.25);
    position: fixed;
    bottom: calc(0rpx + env(safe-area-inset-bottom) / 2);
    bottom: calc(0rpx + constant(safe-area-inset-bottom));
    height: 60rpx;
    width: 100vw;
    z-index: 0;
  }
  
  .tn-color-wallpaper{
    color: #1D2541;
  }

  .top-backgroup {
    height: 450rpx;
    z-index: -1;
  
    .backgroud-image {
      width: 100%;
      height: 450rpx;
      // z-index: -1;
    }
  }

  .wallpaper-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
 
  .icon20 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
        }
      }
    }
  }
  
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
  
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 40rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
  
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
        }
      }
    }
  }
</style>
